<template>
  <div class="content_main">
    <div class="conten_main1">
      <div class="cont_main">
        <div class="cont_tip">
          <div class="min_image">
            <img src="../../assets/Avatar.png" />
          </div>
          <div class="cont_name">张忠辉</div>

          <div class="cont_tab">
            <ul>
              <li>主治医师</li>
              <li>呼吸内科</li>
            </ul>
          </div>
          <div class="cont_hos">
            <div class="con_job">三甲</div>
            <div class="con_js">上海交通大学医学院附属第九人民医院</div>
          </div>
          <div class="cont_pf">
            <div class="pf_img">
              <img src="../../assets/icon_xx.png" /><span>4.8</span>
            </div>
            <div class="pf_hp">好评<span>96%</span></div>
          </div>
          <div class="cont_js">
            <span>擅长</span
            >肺炎，哮喘，支气管炎，咳嗽，过敏性鼻炎，肺炎，哮喘，支气管炎，咳嗽，过敏性，支气管炎，咳嗽，肺炎，支气管炎。
          </div>
          <div class="cont_hidd" v-if="this.show == true">
            <span>简介</span
            >呼吸内科住址医师，从事呼吸内科床，对呼吸常见病常见多发疾病的诊断和治疗有较深造诣，毕业于安徽医科大学医学专业，
          </div>
          <div class="cont_hidd" v-if="this.show == true">
            <span>执业医院</span>xx互联网医院
            <p>医疗执业许可登记号：QWP400008765578A899</p>
          </div>
          <div class="cont_hidd1" v-if="this.show == true">
            <span @click="showPopup">查看医疗许可证</span>
            <van-popup v-model="show1"
              ><img src="../../assets/icon_tc.png"
            /></van-popup>
          </div>
          <div class="cont_zk" v-if="this.show == false">
            <div>展开<img @click="zk" src="../../assets/icon_back.png" /></div>
          </div>
          <div class="cont_zk" v-if="this.show == true">
            <div>收起<img @click="zk1" src="../../assets/icon_up.png" /></div>
          </div>
        </div>
        <div class="cont_body">
          <div class="body_main">
            <div class="body_title">就诊人评价</div>
            <div class="body_tab">
              <ul>
                <li>性价比高(100)</li>
                <li>服务态度好(90)</li>
                <li>超级满意(50)</li>
                <li>专业度高(40)</li>
              </ul>
            </div>
            <div class="body_content">
              <div class="content_top">
                <img src="../../assets/icon_people.png" />
                <div class="content_text">
                  <span>k**8</span>
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                </div>
              </div>
              <div class="content_body">
                非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
              </div>
              <div class="content_foot">
                <div class="foot_text">图文问诊</div>
                <div class="foot_data">2020-09-09 13:20:09</div>
              </div>
            </div>
            <div class="body_content">
              <div class="content_top">
                <img src="../../assets/icon_people.png" />
                <div class="content_text">
                  <span>k**8</span>
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                </div>
              </div>
              <div class="content_body">
                非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
              </div>
              <div class="content_foot">
                <div class="foot_text">图文问诊</div>
                <div class="foot_data">2020-09-09 13:20:09</div>
              </div>
            </div>
            <div class="body_content">
              <div class="content_top">
                <img src="../../assets/icon_people.png" />
                <div class="content_text">
                  <span>k**8</span>
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                </div>
              </div>
              <div class="content_body">
                非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
              </div>
              <div class="content_foot">
                <div class="foot_text">图文问诊</div>
                <div class="foot_data">2020-09-09 13:20:09</div>
              </div>
            </div>
            <div class="body_content">
              <div class="content_top">
                <img src="../../assets/icon_people.png" />
                <div class="content_text">
                  <span>k**8</span>
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                </div>
              </div>
              <div class="content_body">
                非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
              </div>
              <div class="content_foot">
                <div class="foot_text">图文问诊</div>
                <div class="foot_data">2020-09-09 13:20:09</div>
              </div>
            </div>
            <div class="body_content">
              <div class="content_top">
                <img src="../../assets/icon_people.png" />
                <div class="content_text">
                  <span>k**8</span>
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                </div>
              </div>
              <div class="content_body">
                非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
              </div>
              <div class="content_foot">
                <div class="foot_text">图文问诊</div>
                <div class="foot_data">2020-09-09 13:20:09</div>
              </div>
            </div>
            <div class="body_content">
              <div class="content_top">
                <img src="../../assets/icon_people.png" />
                <div class="content_text">
                  <span>k**8</span>
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                </div>
              </div>
              <div class="content_body">
                非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
              </div>
              <div class="content_foot">
                <div class="foot_text">图文问诊</div>
                <div class="foot_data">2020-09-09 13:20:09</div>
              </div>
            </div>
            <div class="body_content">
              <div class="content_top">
                <img src="../../assets/icon_people.png" />
                <div class="content_text">
                  <span>k**8</span>
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                </div>
              </div>
              <div class="content_body">
                非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
              </div>
              <div class="content_foot">
                <div class="foot_text">图文问诊</div>
                <div class="foot_data">2020-09-09 13:20:09</div>
              </div>
            </div>
            <div class="body_content">
              <div class="content_top">
                <img src="../../assets/icon_people.png" />
                <div class="content_text">
                  <span>k**8</span>
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                </div>
              </div>
              <div class="content_body">
                非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
              </div>
              <div class="content_foot">
                <div class="foot_text">图文问诊</div>
                <div class="foot_data">2020-09-09 13:20:09</div>
              </div>
            </div>
            <div class="body_content">
              <div class="content_top">
                <img src="../../assets/icon_people.png" />
                <div class="content_text">
                  <span>k**8</span>
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                </div>
              </div>
              <div class="content_body">
                非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
              </div>
              <div class="content_foot">
                <div class="foot_text">图文问诊</div>
                <div class="foot_data">2020-09-09 13:20:09</div>
              </div>
            </div>
            <div class="body_content">
              <div class="content_top">
                <img src="../../assets/icon_people.png" />
                <div class="content_text">
                  <span>k**8</span>
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                  <img src="../../assets/icon_star.png" />
                </div>
              </div>
              <div class="content_body">
                非常满意，医生耐心等待，诊断明确，服药后药到病除，非常满意，医生耐心等待，诊断明确，服药后药到病除。
              </div>
              <div class="content_foot">
                <div class="foot_text">图文问诊</div>
                <div class="foot_data">2020-09-09 13:20:09</div>
              </div>
            </div>
          </div>
        </div>
        <div class="cont_foot">
          <div class="foot_main">
            下载APP向他问诊
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      show1: false
    };
  },
  methods: {
    zk() {
      this.show = true;
    },
    zk1() {
      this.show = false;
    },
    showPopup() {
      this.show1 = true;
    }
  }
};
</script>
<style lang="less" scoped>
.content_main {
  height: 100%;
  overflow-y: auto;
  .conten_main1 {
    background: url("../../assets/doctor_top.png") no-repeat top;
    background-size: 100% 1.48rem;
    padding-top: 0.63rem;
    .cont_main {
      background: #f7f7f7;
      .min_image {
        width: 0.6rem;
        min-width: 0.6rem;
        height: 0.6rem;
        position: absolute;
        top: -0.2rem;
        right: 0.25rem;
        border-radius: 50%;
        overflow: hidden;
        img {
          vertical-align: top;
          width: 100%;
        }
      }
      .cont_tip {
        padding: 0.15rem;
        margin-bottom: 0.1rem;
        position: relative;
        background: #fff;
        .cont_name {
          font-size: 0.25rem;
          display: block;
          margin-bottom: 0.19rem;
        }
        .cont_gz {
          display: flex;
          margin-right: 0.1rem;
          width: 0.6rem;
          height: 0.27rem;
          border-radius: 0.27rem;
          border: 1px solid #08d6c6;
          font-size: 0.14rem;
          margin-left: auto;
          justify-content: center;
          align-items: center;
        }
        .cont_tab {
          margin-bottom: 0.1rem;
          ul {
            li {
              width: 0.68rem;
              height: 0.29rem;
              line-height: 0.29rem;
              background: #f5f5f5;
              margin-right: 0.1rem;
              text-align: center;
              display: inline-block;
            }
          }
        }
        .cont_hos {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.11rem;
          .con_job {
            width: 0.4rem;
            font-size: 0.11rem;
            background: #f7b500;
            color: #fff;
            text-align: center;
          }
          .con_js {
            flex: 1;
            padding-left: 0.06rem;
          }
        }
        .cont_pf {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.1rem;
          .pf_img {
            img {
              width: 0.18rem;
            }
            span {
              font-size: 0.2rem;
              padding-left: 0.05rem;
            }
          }
          .pf_hp {
            flex: 1;
            font-size: 0.13rem;
            padding-left: 0.73rem;
            span {
              font-size: 0.2rem;
              padding-left: 0.05rem;
            }
          }
        }
        .cont_js {
          font-size: 0.13rem;
          margin-bottom: 0.15rem;
          span {
            padding-right: 0.1rem;
            color: #00c9af;
          }
        }
        .cont_hidd {
          font-size: 0.13rem;
          margin-bottom: 0.15rem;
          span {
            padding-right: 0.1rem;
            color: #00c9af;
          }
        }
        .cont_hidd1 {
          width: 1.32rem;
          height: 0.27rem;
          border-radius: 0.27rem;
          line-height: 0.27rem;
          border: 0.01rem solid rgba(8, 214, 198, 1);
          font-size: 0.13rem;
          color: #08d6c6;
          margin: 0 auto;
          text-align: center;
          margin-bottom: 0.15rem;
          img {
            width: 3.45rem;
            background-size: 100%;
          }
        }
        .cont_zk {
          text-align: center;
          font-size: 0.12rem;
          display: block;
          img {
            width: 0.1rem;
            padding-left: 0.07rem;
          }
        }
      }
    }
    .cont_body {
      background: #fff;
      margin-bottom: 0.1rem;
      .body_main {
        padding: 0.2rem 0.15rem;
        .body_title {
          font-size: 0.18rem;
          color: #000;
          margin-bottom: 0.05rem;
        }
        .body_tab {
          margin-bottom: 0.2rem;
          ul {
            li {
              width: 1rem;
              height: 0.29rem;
              line-height: 0.29rem;
              background: #f5f5f5;
              margin-right: 0.1rem;
              margin-top: 0.1rem;
              text-align: center;
              display: inline-block;
            }
          }
        }
        .body_content {
          margin-bottom: 0.15rem;
          border-bottom: 0.005rem solid rgba(234, 233, 233, 1);
          .content_top {
            display: flex;
            margin-bottom: 0.1rem;
            img {
              width: 0.35rem;
            }
            .content_text {
              padding-left: 0.1rem;
              span {
                font-size: 0.13rem;
                display: block;
              }
              img {
                width: 0.1rem;
              }
            }
          }
          .content_body {
            font-size: 0.13rem;
            color: #666;
            margin-bottom: 0.1rem;
          }
          .content_foot {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.16rem;
            .foot_text {
              width: 0.63rem;
              background: #f5f5f5;
              text-align: center;
              color: #666;
            }
            .foot_data {
              color: #999;
            }
          }
        }
      }
    }
    .cont_foot {
      padding: 0.2rem 0.25rem;
      background: #fff;
      position: fixed;
      bottom: 0;
      .foot_main {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3.35rem;
        height: 0.44rem;
        font-size: 0.18rem;
        color: #fff;
        line-height: 0.44rem;
        border-radius: 0.44rem;
        background: url("../../assets/icon_foot.png") no-repeat center;
      }
    }
  }
}
</style>
